import React from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import {memberTypeListSource} from "../../http/api"
export default class Pay extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        dataSource:[],
                        currentCheckedId:''
                }
        }
        componentWillMount () {
                this.getDataSource()
        }
        getDataSource = ()=>{
                memberTypeListSource().then(res=>{
                        const {list} = res
                        const currentCheckedId = list.length?list[0].id:''
                        this.setState({dataSource:list,currentCheckedId})
                })
        }

        render () {
                const {dataSource,currentCheckedId} = this.state
                return <ContentView title='开通会员' className = 'pay'>
                        <ScrollContent>
                                <div className='top-bg' />
                                <div className="label">请选择会员类型</div>
                                <div className="items-wrapper">
                                        {
                                                dataSource.map((item,key)=><div
                                                        onClick={()=>this.setState({currentCheckedId:item.id})}
                                                        className={`item ${item.id === currentCheckedId&&'active'}`} key={key} >
                                                        <div className="content">
                                                                <div className="radio-wrapper">
                                                                        <div className="radio"/>
                                                                </div>
                                                                <div className="line-wrapper">
                                                                        <div className="line">
                                                                                <span className="text name">{item.cardName}</span>
                                                                                <span className="text price">{item.realPayAmount}元</span>
                                                                        </div>
                                                                        <div className="line">
                                                                                <span className="text time">有效期:{item.timeLimit}天</span>
                                                                                <span className="text origin">原价{item.originalPayAmount}元</span>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>)
                                        }
                                </div>
                                <div className="btn-wrapper">
                                        <div className="btn">支付</div>
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
